<script setup>
const props = defineProps({
    show: Boolean,
});
</script>

<template>
    <div class="relative flex z-40" v-if="show">
        <div
            x-transition:enter="transition duration-300 ease-out"
            x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
            x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100"
            x-transition:leave="transition duration-150 ease-in"
            x-transition:leave-start="translate-y-0 opacity-100 sm:scale-100"
            x-transition:leave-end="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
            class="fixed inset-0 overflow-y-auto bg-gray-500 bg-opacity-50"
            aria-labelledby="modal-title"
            role="dialog"
            aria-modal="true"
        >
            <div
                class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-right sm:block sm:p-0"
            >
                <div
                    class="relative inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white shadow-xl dark:bg-gray-900 sm:w-full sm:min-h-screen sm:max-w-sm sm:align-middle"
                >
                    <slot name="modal"></slot>
                </div>
            </div>
        </div>
    </div>
</template>
